<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	template="../Template/Template.xhtml"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:rich="http://richfaces.org/rich">

	<ui:define name="title">
    Trang chi tiết sản phẩm
  	</ui:define>

	<ui:define name="content">

		<h:outputStylesheet library="css" name="chitietsanpham.css" />

		<div id="MainPanel" align="left">
			<div class="ContentPart">
				<h1 class="ContentPartTitle" align="center">CHI TIẾT SẢN PHẤM</h1>
			</div>

			<h3 class="ContentPartHeader">#{trangChiTietSanPhamBean.currSanpham.tensanpham}</h3>
			<div class="ContentPartContent">
				<div class="hinhAnhChiTiet">
					<img
						src="../Images/Products/#{trangChiTietSanPhamBean.currSanpham.hinhanh}" />
				</div>

				<div class="infoBox opacityBackground">

					<div class="ins">Tên sản phẩm:</div>
					<span class="largeSize bold italic">
						#{trangChiTietSanPhamBean.currSanpham.tensanpham}</span> <br />
					<div class="ins">Giá bán:</div>
					<span class="red mediumSize bold"> <h:outputText
							value="#{trangChiTietSanPhamBean.currSanpham.giaban}">
							<f:convertNumber groupingUsed="true" pattern="#0,000" />
						</h:outputText> VNĐ
					</span> <br />
					<div class="ins">Số lượt xem:</div>
					<span class="biggerFont bold">
						#{trangChiTietSanPhamBean.currSanpham.soluotxem} </span> <br />
					<div class="ins">Số lượng bán:</div>
					<span class="biggerFont bold">
						#{trangChiTietSanPhamBean.currSanpham.soluongban}</span> <br />
					<div class="ins">Xuất xứ:</div>
					<span class="biggerFont bold">
						#{trangChiTietSanPhamBean.currSanpham.xuatxu} </span> <br />
					<div class="ins">Nhà sản xuất</div>
					<a href="#{trangChiTietSanPhamBean.currSanpham.nhasanxuat.website}">
						<span class="biggerFont bold">
							#{trangChiTietSanPhamBean.currSanpham.nhasanxuat.tennhansanxuat}
					</span>
					</a> <br />
					<div class="ins">Tình trạng:</div>
					<span class="biggerFont bold red"> Còn hàng </span> <br />
					<h:commandButton class="buttonLink button buyNowButton"
						action="#{gioHangBean.ThemSanPham(trangChiTietSanPhamBean.currSanpham.masanpham)}"
						value="Mua Ngay" />
					<br /> <br /> <span class="biggerFont">Xem danh mục các
						sản phẩm còn lại của >> </span>
					<h:link styleClass="biggerFont bold blue italic" immediate="true"
						outcome="#{headerBean.ChuyenTrangSanPhamTheoDanhMuc(trangChiTietSanPhamBean.currSanpham.loaisanpham.nhomsanpham.manhom)}">
						#{trangChiTietSanPhamBean.currSanpham.loaisanpham.nhomsanpham.tennhom} </h:link>
				</div>

				<h3 class="ContentPartHeader noiDungMoTa">MÔ TẢ</h3>
				<div class="ContentPartContent ">
					#{trangChiTietSanPhamBean.currSanpham.mota}</div>
			</div>


			<h3 class="ContentPartHeader">Bình luận</h3>
			<div class="ContentPart">
				<div class="ContentPartContent">
					<h:messages id="messageNotification" />
				</div>
			</div>
			<div class="ContentPartContent" align="left">
				<h:panelGroup id="tableContentBinhLuan"
					rendered="#{taiKhoanDangNhapBean.daDangNhap}">
					<div class="ins shortIns">Nhập nội dung:</div>

					<h:inputTextarea id="noiDungBinhLuan" class="txtField"
						value="#{trangChiTietSanPhamBean.noiDungBinhLuan}" />

					<h:commandButton class="buttonLink button sendCommentButton"
						action="#{trangChiTietSanPhamBean.PostBinhLuan()}"
						value="Gửi bình luận">

						<f:ajax execute="@form" render="danhSachBinhLuan" />
						<!--  immediate="true"> -->

						<!-- <f:ajax execute="@all" render="tableContentBinhLuan" /> -->
						<!-- <f:ajax render="tableContentBinhLuan" /> -->
					</h:commandButton>
					<hr color="#009900" />

				</h:panelGroup>
				<h:panelGroup id="danhSachBinhLuan">
					<ui:repeat value="#{trangChiTietSanPhamBean.lstBinhLuan}" var="bl">
						<div class="binhLuan opacityBackground">
							<div class="ngayGui">
								<h:outputText value="#{bl.ngayviet}" />
							</div>
							<div class="tenThanhVien">
								<h:outputText value="#{bl.taikhoan.hoten}" />
							</div>
							<div class="noiDung">
								<h:outputText value="#{bl.noidung}" />
							</div>
						</div>
					</ui:repeat>
				</h:panelGroup>
			</div>



			<!-- 
			<h3 class="ContentPartHeader">Sản phẩm cùng loại</h3>
			<div class="ContentPartContent" align="left">

				<div id="SameProduct">
				
				<marquee onmouseout="this.start();" onmouseover="this.stop();" scrolldelay="150" direction="right">
				
					<ui:repeat value="#{trangChiTietSanPhamBean.lstSanphamCungLoai}"
						var="sanpham">
						
						<div>
							<a href="Trang_ChiTietSanPham.do?masp=#{sanpham.masanpham}">
								<img align="texttop" src="../Images/Products/#{sanpham.hinhanh}"
								alt="" />
							</a>
							<p>
								#{sanpham.tensanpham} | <span> <fmt:formatNumber
										type="number" value="${sanphamcungloai[i].giaban}"
										groupingUsed="true" /> <h:outputText
										value="#{sanpham.giaban}">
										<f:convertNumber groupingUsed="true" pattern="#,##0" />
									</h:outputText>

								</span> VNĐ
							</p>

							<h:commandButton process="@this" immediate="true"
								class="buttonLink button" action="TrangChiTietSanPham"
								value="Mua ngay" />
						</div>
					</ui:repeat>
					</marquee>
				</div>
			</div> -->
			<h3 class="ContentPartHeader">Sản phẩm cùng loại</h3>
			<div class="ContentPartContent" align="left">

				<div id="SameProduct">
					<marquee onmouseout="this.start();" onmouseover="this.stop();"
						scrolldelay="50" scrollamount="3" direction="right">

						<ui:repeat value="#{trangChiTietSanPhamBean.lstSanphamCungLoai}"
							var="sanpham">
							<div>

								<p class="sampleTitle">#{sanpham.tensanpham}</p>
								<a href="Trang_ChiTietSanPham.do?masp=#{sanpham.masanpham}">
									<img class="imgSanPhamTuongTu" align="texttop"
									src="../Images/Products/#{sanpham.hinhanh}" alt="" />
								</a>

								<h:commandLink process="@this" immediate="true"
									class="smallCartIcon cartSample"
									action="#{gioHangBean.ThemSanPham(sanpham.masanpham)}">
									<img class="smallCartIcon imgNoBackgroundBorder"
										src="../Images/green_cart.png" />
								</h:commandLink>

								<p class="sampleInfo">

									<h:outputText styleClass="red" value="#{sanpham.giaban}">
										<f:convertNumber groupingUsed="true" pattern="#,##0" />
									</h:outputText>
									VNĐ
								</p>
								<!-- <h:commandButton process="@this" immediate="true"
								class="buttonLink button" action="TrangChiTietSanPham"
								value="Mua ngay" /> -->

							</div>
						</ui:repeat>
					</marquee>
				</div>
			</div>
		</div>
	</ui:define>
</ui:composition>

